<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <h1 class="info">个人信息</h1>
            </div>
        </template>
        <div class="registerwin">
            <el-form :model="form" label-width="120px" :size="formSize" status-icon>
                <div class="registerform">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="用户名" prop="username">
                                <el-input v-model="username" class="input" />
                            </el-form-item>
                            <el-form-item label="手机号码" prop="phoneNumber">
                                <el-input v-model="form.phoneNumber" class="input" />
                            </el-form-item>
                            <!-- <el-form-item label="邮箱" prop="email">
                                <el-input v-model="form.email" class="input" />
                            </el-form-item> -->
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="出生日期" prop="birthday">
                                <el-date-picker v-model="form.birthday" type="date" placeholder="选择出生日期"
                                    :disabledDate="hiredateDisabledDate" :shortcuts="hiredateShortcuts" format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD" class="input" />
                            </el-form-item>
                            <el-form-item label="性别" prop="sex">
                                <el-radio-group v-model="form.sex">
                                    <el-radio :label="0">男</el-radio>
                                    <el-radio :label="1">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <!-- <el-form-item label="地址" prop="address">
                                <el-input v-model="form.address" class="input" />
                            </el-form-item> -->
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button type="primary" @click="onEdit" v-if="disabled">编辑</el-button>
                        <el-button @click="onSave" v-if="!disabled">保存</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import $axios from '../components/utils/axios'
import { ElNotification } from 'element-plus'

const form = ref({})
form.value.id = sessionStorage.getItem('id')
const username = ref('')
username.value = JSON.parse(sessionStorage.getItem('user')).name
form.value.sex = JSON.parse(sessionStorage.getItem('user')).sex
form.value.birthday = JSON.parse(sessionStorage.getItem('user')).birthday
form.value.email = JSON.parse(sessionStorage.getItem('user')).email || ''
form.value.address = JSON.parse(sessionStorage.getItem('user')).address || ''

const hiredateDisabledDate = (time) => time.getTime() > new Date().getTime()
const hiredateShortcuts = [
    {
        text: '昨天',
        value: () => {
            let now = new Date().getTime()
            now -= 86400000
            return new Date().setTime(now)
        }
    },
    {
        text: '前天',
        value: () => {
            let now = new Date().getTime()
            now -= 86400000 * 2
            return new Date().setTime(now)
        }
    },
    {
        text: '7天前',
        value: () => {
            let now = new Date().getTime()
            now -= 86400000 * 7
            return new Date().setTime(now)
        }
    }
]

const fetchData = async () => {
    const userId = sessionStorage.getItem('id')
    const path = `/api/supervisor/personalInfo/${userId}`
    const { data: res } = await $axios.get(path)
    if (res.code === "200") {
        form.value.sex = res.data.sex
        form.value.birthday = res.data.birthday
        form.value.phoneNumber = res.data.phoneNumber
        form.value.email = res.data.email
        form.value.address = res.data.address
    }
}

onMounted(fetchData)

const onEdit = () => {
    disabled.value = false
}

const onSave = async () => {
    const path = '/api/supervisor/updateInfo'
    try {
        const response = await $axios.post(path, form.value)
        if (response.data.code === '00000') {
            ElNotification({
                title: '成功',
                message: '已成功修改个人信息。',
                type: 'success'
            })
        } else {
            ElNotification({
                title: '失败',
                message: '未知原因，修改失败！',
                type: 'error'
            })
        }
    } catch (error) {
        ElNotification({
            title: '失败',
            message: '无法保存个人信息。',
            type: 'error'
        })
    }
}
</script>

<style scoped>
.box-card {
    width: 95%;
    height: auto;
    margin-top: 12px;
    border-radius: 12px;
    padding: 20px;
    background: #f0f8ff;
}

.card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 20px;

    /* .info {
        font-size: 24px;
        color: #4682b4;
    } */
}

.registerform {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.input {
    width: 100%;
}

.el-row {
    margin-bottom: 20px;
}

.el-form-item {
    margin-bottom: 20px;
}
</style>
